<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>学生成绩管理系统</title>
    <style>
        /* 导航栏样式 */
        .navbar {
            /* background-color: #b5b3b3; 灰色背景 */

            display: flex;
            /* flex弹性布局 */
            /*   justify-content: space-between; /* 左右对齐 */
            /*  padding: 10px,0px; /* 内边距 */
            align-items: flex-end;
            justify-content: flex-start;

        }

        #h11 {
            /* margin: 0; 移除默认的上下外边距 */
            font-weight: bold;
            /* 加粗 */
            /* color: rgb(106, 176, 237); */
            /* 设置字体为楷体 */
            font-family: "楷体";
            margin-left: 45%;
            /* color: rgb(89, 89, 196); */
            display: flex;
            margin-bottom: 0px;
            ;

        }

        /* 搜索表单样式 */
        .search-form {
            display: flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: 10px;
            /* 控件之间的间距 */
            margin: 20px 0;
            width: 80%;

        }

        #search-label {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
        }

        #显示 {
            position: absolute;
            right: 0;
            bottom: 20px;
            display: flex;
            height: 30.36px;
            /* 内容靠底部 */
            align-items: flex-end;
        }
        #姓名{
    
            color: rgb(69, 69, 69);
            /* 文字颜色 */
            /* 楷体 */
            font-family: '楷体';
            font-weight: bold;
            position: relative;
            bottom: 0px;
        }

        #学号 {
            margin-left: 20px;
            color: rgb(69, 69, 69);
            /* 文字颜色 */
            /* 楷体 */
            font-family: '楷体';
            font-weight: bold;
            position: relative;
            bottom: 0px;

        }

        #学分:last-child {
            margin-left: 20px;
            /* 加粗 */
            font-weight: bold;
            color: rgb(69, 69, 69);
            /* 文字颜色 */
            font-family: '楷体';
            position: relative;
            bottom: 0px;

        }

        .search-form input[type="text"],
        .search-form select {
            padding: 5px;
            /* 输入框内边距 */
            width: 230px;
            /* 宽度 */

        }

        .search-form button {
            padding: 5px 15px;
            /* 按钮内边距 */
        }

        /* 表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid;
            /* 边框 */
            border-color: rgb(25, 25, 112);
            padding: 8px;
            /* 单元格内边距 */
            text-align: center;
            /* 左对齐 */
            color: rgb(69, 69, 69);
            /* 文字颜色 */
            /* 文字楷体 */
            font-family: '楷体';
            font-size: 20px;
        }

        th {
            /* background-color:rgb(255,255,224); */
            background-color: rgba(74, 254, 203, 0.838);
            font-weight: bold;
        }

        .avatar {
            width: 30px;
            height: 30px;
        }

        #container {
            width: 80%;
            /* 宽度为80% */
            margin: 0 auto;
            /* 水平居中 */
        }

        body {
            /* background-image: url("https://bpic.588ku.com/back_pic/06/11/93/036226bf26d5d85.jpg"); */
            background-image: url("../image/2.jpg");
            background-size: cover;
            background-repeat: no-repeat;

            background-position: center;
            background-attachment: fixed;
            /* 背景占据整个页面 */
        }

        #退出登录 {
            /* 背景完全透明 */
            background-color: rgba(0, 0, 0, 0);
            /* 去掉边框 */
            border: none;
            color: rgb(128, 128, 128);
            font-family: '楷体';
            font-size: 15px;
            padding-left: 0px;
        }

        #修改个人信息 {
            /* 背景完全透明 */
            background-color: rgba(0, 0, 0, 0);
            /* 去掉边框 */
            border: none;
            color: rgb(128, 128, 128);
            font-family: '楷体';
            font-size: 15px;
            padding-left: 0px;
        }

        #清空 {
            background-color: rgb(192, 202, 204);
            border-color: rgb(255, 255, 255);
            color: rgb(69, 69, 69);
            font-family: '楷体';
            font-size: 15px;

        }

        #查询 {

            /* background-color: rgb(71,255,203);
            border-color: rgb(173,216,230);         */
            /* background-color: rgb(71, 255, 203);
            border-color: rgb(255,255,255);
            color: rgb(255,255,255); */

            background-color: rgb(52, 165, 200);
            border-color: rgb(255, 255, 255);
            color: rgb(255, 255, 255);
            font-family: '楷体';
            font-size: 15px;
        }

        #sub {
            background-color: rgb(204, 224, 230);
            border-color: rgb(255, 255, 255);
            font-family: '楷体';
            font-size: 15px;

        }

        #sem {
            background-color: rgb(204, 224, 230);
            border-color: rgb(255, 255, 255);
            font-family: '楷体';
            font-size: 15px;
        }

        #xklable {
            color: rgb(69, 69, 69);
        }

        #修改退出 {
            text-align: right;
            /* 内容右对齐 */
        }




        /* 修改个人信息样式 */
        /* 模态框背景 */
        .modal {
            display: block;
            /* 默认隐藏，由Vue控制显示 */
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            /* 半透明背景 */
        }

        /* 模态框内容 */
        .modal-content {
            /* background: url('https://img.shetu66.com/2023/08/03/1691051107579300.png'); */
            /* background: url('https://img.shetu66.com/2023/04/25/1682387621537801.png'); */
            background: url('https://img.shetu66.com/2023/09/05/1693878012045806.png');
            background-size: cover;
            background-repeat: no-repeat;
            margin: 15% auto;
            margin-top: 100px;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            max-width: 500px;
            position: relative;
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            /* 添加阴影效果 */
            border-radius: 8px;
            /* 圆角 */
            color: rgb(69, 69, 69);
        }

        /* 关闭按钮 */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
        }

        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
        }

        /* 表单组 */
        .form-group {
            margin-bottom: 15px;
            /* 组件间的间距 */
        }

        .form-group label {
            display: inline-block;
            width: 100px;
            /* 标签宽度 */
            text-align: right;
            margin-right: 10px;
            /* 标签与输入框之间的间距 */
            font-weight: bold;
        }

        .form-group input,
        .form-group select {
            padding: 8px;
            width: calc(100% - 120px);
            /* 减去标签宽度和间距 */
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        /* 按钮组 */
        .button-group {
            text-align: center;
            /* 居中对齐按钮 */
            margin-top: 20px;
            /* 上边距 */
        }

        .button-group button {
            padding: 10px 20px;
            margin: 0 5px;
            border: none;
            border-radius: 4px;
            background-color: #007BFF;
            color: white;
            cursor: pointer;
        }

        .button-group button:hover {
            background-color: #0056b3;
        }

        .button-group button[type="button"] {
            background-color: #6c757d;
        }

        .button-group button[type="button"]:hover {
            background-color: #5a6268;
        }

        #l {
            /* 文字左对齐 */
            text-align: left;
        }
    </style>
</head>

<body>
    <div id="container">
        <!-- 顶部导航栏 -->
        <h1 id="h11">欢迎, {{ select.username }}同学</h1>
        <div class="navbar">
            <div id="修改退出">
                <button id="修改个人信息" type="button" v-on:click="handle2">修改信息</button>
                <button id="退出登录" type="button" v-on:click="handle">退出登录</button>
            </div>
         

        </div>
  <!--       <div>
            <h1></h1>
        </div>
 -->
        <!-- 修改个人信息对话框 -->
        <div v-if="isEditModalVisible" class="modal">
            <div class="modal-content">
                <span class="close" @click="cancelEdit">&times;</span>
                <h2>修改个人信息</h2>
                <form @submit.prevent="saveEdit" class="edit-form">
                    <div class="form-group">
                        <label id="l" for="username">用户名:</label>
                        <input type="text" id="username" v-model="editForm.newUsername" required>
                    </div>

                    <div class="form-group">
                        <label id="l" for="name">姓名:</label>
                        <input type="text" id="name" v-model="editForm.name" required>
                    </div>
                    <div class="form-group">
                        <label id="l" for="email">邮箱:</label>
                        <input type="email" id="email" v-model="editForm.email" required>
                    </div>

                    <div>
                        <input type="checkbox" id="togglePassword" v-model="isChangePassword"
                            v-on:click="toggleChangePassword">
                        <label for="togglePassword" id="修改密码">修改密码</label>
                    </div>

                    <div v-if="isChangePassword" class="password-fields">
                        <div class="form-group">
                            <label id="l" for="oldPassword">原密码:</label>
                            <input type="password" id="oldPassword" v-model="editForm.oldPassword" required>
                        </div>

                        <div class="form-group">
                            <label id="l" for="newPassword">新密码:</label>
                            <input type="password" id="newPassword" v-model="editForm.newPassword" required>
                        </div>

                        <div class="form-group">
                            <label id="l" for="newPassword">确认密码:</label>
                            <input type="password" id="confirmPassword" v-model="editForm.confirmPassword" required>
                        </div>
                    </div>


                    <div class="button-group">
                        <button type="submit">保存</button>
                        <button type="button" @click="cancelEdit">取消</button>
                    </div>
                </form>
            </div>
        </div>




        <!-- 搜索表单区域 -->
        <div id="search-label">
            <form class="search-form">
                <!-- <label for="sub" id="xklable">学科：</label> -->
                <input type="text" id="sub" name="sub" v-model="select.subjectName" placeholder="请输入科目名">
              <!--   <input type="text" id="sem" name="sem" v-model="select.semester" placeholder="请输入学期"> -->
                <button type="button" v-on:click="inquery" id="查询">查询</button>
                <button type="button" @click="clear" id="清空">清空</button>
            </form>
    
            <div id="显示">
                <label id="姓名">姓名:{{name}}</label>
                <label id="学号">学号:{{studentId}}</label>
                <label id="学分">共计学分:{{sumCredit}}</label>
            </div>
        </div>

        <!-- 表格展示区 -->
        <table>
            <!-- 表头 -->
            <thead>
                <tr>
                    <!--  <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>班级</th>
                    <th>邮箱</th> -->
                    <th>课程名称</th>
                    <!-- <th>成绩</th> -->
                    <th>平时成绩</th>
                    <th>期中成绩</th>
                    <th>期末成绩</th>
                    <th>综合成绩</th>
                    <th>班级排名</th>
                    <!-- <th>评论</th> -->
          <!--           <th>学期</th> -->
                    <th>获得学分</th>
                </tr>
            </thead>

            <!-- 表格主体内容 -->
            <tbody>
                <tr v-for="(e,index) in student">
                    <!--  <td>{{e.studentId}}</td>
                    <td>{{e.name}}</td>
                    <td>{{e.gender==1?'男':'女'}}</td>
                    <td>{{e.className}}</td>
                    <td>{{e.email}}</td> -->
                    <td>{{e.subjectName}}</td>
                    <!-- <td>{{e.score}}</td> -->
                     <td>{{e.usualScore}}</td>
                    <td>{{e.midtermScore}}</td>
                    <td>{{e.finalScore}}</td>
                    <td>{{e.score}}</td>
                    <td>{{e.place}}</td>
                    <!-- <td>{{e.remark}}</td> -->
                  <!--   <td>{{e.semester}}</td> -->
                    <td>{{e.earnCredit}}</td>
                </tr>
            </tbody>
        </table>




    </div>


    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script type="module">
        // 获取本地存储信息
        let userStudentInfo = JSON.parse(localStorage.getItem('userStudentInfo'));
        var token = userStudentInfo.token;// 从本地存储中获取token


        // 添加axios请求拦截器,添加Token和Content-Type
        axios.interceptors.request.use(config => {
            config.headers.Token = token  // 添加自定义Token
            return config;
        }, error => {
            return Promise.reject(error);
        });
        // 添加axios响应拦截器
        axios.interceptors.response.use(
            response => response,
            error => {
                if (error.response.status === 401) {
                    vueInstance.message('登录超时，请重新登录', 'rgb(254, 240, 240)', 'rgb(245, 108, 108)');
                    localStorage.clear();

                    setTimeout(() => {
                        window.location.href = '../login.html';
                    }, 1200);  // 1.2秒后执行跳转
                }
                return Promise.reject(error);
            });
        console.log(userStudentInfo);
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

        let vueInstance;
        createApp({
            created() {
                vueInstance = this; // 保存Vue实例引用
            },
            data() {
                return {
                    searchForm: {  //进入首页时发送的数据
                        username: userStudentInfo.username,
                        password: userStudentInfo.password,
                        role: userStudentInfo.role
                    },
                    select: {     //封装用户输入的查询条件,条件查询发送的数据
                        subjectName: '',
                        semester: '',
                        username: userStudentInfo.username
                    },
                    student: [],  // 学生信息列表

                    isChangePassword: false, // 控制是否显示密码输入框
                    isEditModalVisible: false, // 控制编辑模态框的显示状态
                    editForm: { // 编辑表单的数据模型
                        newUsername: '',
                        name: '',
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: '',
                        email: '',
                        username: ''

                    },
                    name: userStudentInfo.name,
                    studentId: userStudentInfo.studentId,
                    sumCredit:'',


                }
            },
            methods: {
                //计算学分和
                sumCredit1(){
                    let sum = 0;
                    for (let i = 0; i < this.student.length; i++) {
                        sum += this.student[i].earnCredit;
                    }
                    this.sumCredit = sum;         
                },
                message(msg, backgroundColor, textColor) {
                    const errorMsg = document.createElement('div');
                    errorMsg.textContent = msg;
                    errorMsg.style.position = 'fixed';
                    errorMsg.style.top = '3px';
                    errorMsg.style.left = '50%';
                    errorMsg.style.transform = 'translateX(-50%)';
                    errorMsg.style.backgroundColor = backgroundColor;
                    errorMsg.style.color = 'white';
                    errorMsg.style.fontFamily = '楷体';
                    errorMsg.style.color = textColor;
                    errorMsg.style.padding = '10px 20px';
                    errorMsg.style.borderRadius = '4px';
                    errorMsg.style.zIndex = '9999';
                    errorMsg.style.height = '20px';
                    document.body.appendChild(errorMsg);

                    setTimeout(() => {
                        document.body.removeChild(errorMsg);
                    }, 3000);
                },

                //async异步执行函数
                // 发送请求获取学生信息列表
                async search() {
                    //使用await变为同步执行(等待返回结果在继续执行下面的代码),用result接收返回的结果
                    let result = await axios({
                        url: 'http://localhost:8080/homePage',
                        method: 'post',
                        data: this.searchForm, //post请求的参数需要写到data中
                    })
                    this.student = result.data.data;
                    this.sumCredit1();
                    console.log(userStudentInfo);
                },

                // 根据查询信息发送请求获取学生信息列表
                async inquery() {
                    //使用await变为同步执行(等待返回结果在继续执行下面的代码),用result接收返回的结果
                    let result = await axios({
                        url: `http://localhost:8080/select?subjectName=${this.select.subjectName}&username=${this.select.username}&semester=${this.select.semester}`,
                        method: 'get',
                    })
                    this.student = result.data.data;

                },
                clear() {
                    this.select = {
                        subjectName: '',
                        semester: '',
                        username: userStudentInfo.username
                    }
                    this.search()
                },
                handle() {  //退出登录
                    //弹出提示框
                    if (confirm('是否退出登录')) {
                        //清除本地存储
                        localStorage.clear();
                        //跳转到登录页面
                        location.href = '../login.html';
                    }
                },
                async handle2() {
                    // 初始化编辑表单数据,数据回显
                    this.editForm = {
                        newUsername: userStudentInfo.username,
                        name: userStudentInfo.name,
                        oldPassword: '',
                        newPassword: '',
                        confirmPassword: '',
                        email: userStudentInfo.email,
                        username: userStudentInfo.username

                    };
                    this.isChangePassword = false; // 默认不显示密码输入框
                    this.isEditModalVisible = true; // 显示编辑模态框
                },

                toggleChangePassword() {
                    this.isChangePassword = !this.isChangePassword; // 切换是否显示密码输入框
                },

                // 修改个人信息保存
                async saveEdit() {
                    if (this.editForm.newPassword !== this.editForm.confirmPassword) {
                        this.message('两次输入的密码不一致!', 'rgb(254, 240, 240)', 'rgb(245, 108, 108)');
                        return;
                    } else {
                        try {
                            // 发送更新请求到服务器
                            let result = await axios.post(`http://localhost:8080/updateStudentInfo`, this.editForm);
                            if (result.data.success) {
                                // 更新本地存储中的用户信息
                                userStudentInfo.username = result.data.data.username;
                                userStudentInfo.email = result.data.data.email;
                                userStudentInfo.role = result.data.data.role;
                                userStudentInfo.name = result.data.data.name;
                                userStudentInfo.studentId = result.data.data.studentId;
                                localStorage.setItem('userStudentInfo', JSON.stringify(userStudentInfo));

                                // 更新表单数据
                                this.searchForm = {
                                    username: userStudentInfo.username,
                                    password: userStudentInfo.password,
                                    role: userStudentInfo.role
                                }
                                this.select = {
                                    subjectName: '',
                                    semester: '',
                                    username: userStudentInfo.username
                                }
                                this.name = userStudentInfo.name;
                                this.studentId = userStudentInfo.studentId;
                                this.message(result.data.msg, 'rgb(240, 249, 235)', 'rgb(103, 194, 58)');
                                this.isEditModalVisible = false; // 关闭编辑模态框
                                this.search();
                            } else {
                                this.message(result.data.msg, 'rgb(254, 240, 240)', 'rgb(245, 108, 108)');
                            }
                        } catch (error) {
                            console.error('修改失败:', error);
                            this.message('修改失败:' + error, 'rgb(254, 240, 240)', 'rgb(245, 108, 108)');
                        }
                    }

                },
                //取消修改
                cancelEdit() {
                    this.isEditModalVisible = false; // 
                    console.log('取消修改');
                    console.log(userStudentInfo)
                },
            },
            //钩子函数
            mounted() {
                //页面加载完之后,发送ajax请求,获取数据
                this.search()
            }
        }).mount('#container')
    </script>

</body>

</html>